<template>
    <div class="calcuator">
        <div>
            <result-box :get-value="inputVal"></result-box>
            <div class="calcBox">
                <span class="btn clear" @click="inputVal=''">C</span>
                <span class="btn back" @click="back">←</span>
                <span class="btn operator" @click="percent">%</span>
                <span class="btn operator" @click="symbol('÷')">÷</span>
                <span class="btn" @click="input('7')">7</span>
                <span class="btn" @click="input('8')">8</span>
                <span class="btn" @click="input('9')">9</span>
                <span class="btn operator" @click="symbol('x')">x</span>
                <span class="btn" @click="input('4')">4</span>
                <span class="btn" @click="input('5')">5</span>
                <span class="btn" @click="input('6')">6</span>
                <span class="btn operator" @click="symbol('-')">-</span>
                <span class="btn" @click="input('1')">1</span>
                <span class="btn" @click="input('2')">2</span>
                <span class="btn" @click="input('3')">3</span>
                <span class="btn operator" @click="symbol('+')">+</span>
                <span class="btn" @click="input('0')">0</span>
                <span class="btn" @click="point('.')">.</span>
                <span class="btn btn-double" @click="resultValue">=</span>
            </div>
        </div>
      <el-icon @click="closeCalcuator" color="orange" style="position: absolute;right: 0px;top: 0px;cursor: pointer"><CircleCloseFilled /></el-icon>
    </div>
</template>

<script>
    import resultBox from "./resultBox/ResultBox";
    export default {
        emits:['closeCalcuator'],
        name: "Calculator",
        data() {
            return {
                inputVal: '',
                dotAdd: false,  // 是否允许输入 .
                operators: ['+', '-', 'x', '÷']
            }
        },

        // 组件
        components: {
            // 计算器结果框组件
            'result-box': resultBox,
        },
        methods: {
          //关闭计算器
            closeCalcuator(){
            this.$emit('closeCalcuator',false)
            },
            // 输入数值
            input(value) {
                this.errorValue()
                let lastChar=this.inputVal[this.inputVal.length - 1];
                let lastTwoChar=this.inputVal[this.inputVal.length - 2];

                // 拒绝开始0的反复，并且防止 0. 这种小数被和谐掉
                if(parseInt(this.inputVal)===0&&(!/0[\.|\s]/.test(this.inputVal))){
                    this.inputVal = value
                }else if(this.operators.indexOf(lastTwoChar) > -1 && lastChar==0) {
                    // 最后一位是 0 ，倒数第二位是 运算符，禁止连续输入0
                }else {
                    this.inputVal += value
                }
            },

            // 加减乘除算术公式
            symbol(value) {
                this.errorValue()
                let lastChar=this.inputVal[this.inputVal.length - 1];
                let lastTwoChar=this.inputVal[this.inputVal.length - 2];
                if(this.inputVal != ''  && this.operators.indexOf(lastTwoChar) > -1 && lastChar=='.'){
                    // 最后一位是 . 并且倒数第二位是 运算符
                    this.inputVal = this.inputVal.substr(0,this.inputVal.length-2)+value;
                }else if(this.inputVal == '' && value == '-'){
                    // input 为空 . 并且 value 为 -
                    this.inputVal += value;
                }else if(this.inputVal != '' && this.operators.indexOf(lastChar) == -1){
                    // input不为空，并且最后一位不是 运算符
                    this.inputVal += value;
                }else if(this.operators.indexOf(lastChar) > -1 && this.inputVal != '') {
                    //input不为空，并且最后一位是 运算符
                    this.inputVal = this.inputVal.replace(/.$/, value);
                }
                this.dotAdd = false
            },

            // 求余运算
            percent() {
                this.errorValue()
                let lastChar=this.inputVal[this.inputVal.length - 1];
                // 如果时数字，直接除以100
                if (!isNaN(this.inputVal)) {
                    this.inputVal = this. inputVal / 100;
                }else if(this.operators.indexOf(lastChar) > -1){
                    //  如果最后一位是 运算符
                }else{
                    let a = this.inputVal.lastIndexOf("+");
                    let b = this.inputVal.lastIndexOf("-");
                    let c = this.inputVal.lastIndexOf("x");
                    let d = this.inputVal.lastIndexOf("÷");

                    // 取最大值即为最右面的运算符位置
                    let i = Math.max(a, b, c, d);
                    this.inputVal = this.inputVal.substr(0, i + 1) + (this.inputVal.substr(i + 1, this.inputVal.length - i) / 100);
                }
                this.dotAdd = false
            },

            // 处理小数点
            point() {
                this.errorValue()
                if (!this.dotAdd) {
                    this.inputVal += '.'
                    this.dotAdd = true
                }
            },

            // 后退
            back() {
                this.errorValue()
                let str = this.inputVal.toString()
                if (str.length == 1) {
                    this.inputVal = ''
                } else {
                    this.inputVal = str.substring(0, str.length - 1)
                }
                this.dotAdd = false
            },

            // 计算结果
            resultValue() {
                this.errorValue()
                /*try {
                  // 替换运算符号
                  let strValue = this.inputVal.replace("×", '*').replace("÷", '/')
                  // 计算
                  this.inputVal = eval(strValue)
                } catch (e) {
                  alert('无法正确计算')
                }*/

                let lastChar=this.inputVal[this.inputVal.length - 1];
                let lastTwoChar=this.inputVal[this.inputVal.length - 2];

                // 最后一位是 0 ，并且 倒数第二位是 ÷
                if(lastChar==0&&this.operators.indexOf(lastTwoChar)==3){
                    this.inputVal = '不能除以0'
                    return
                }
                // 替换运算符
                this.inputVal = this.inputVal.replace(/x/g, '*').replace(/÷/g, '/');
                // 如果最后一位是 运算符 或 .,直接截掉
                if(this.operators.indexOf(lastChar) > -1||lastChar == '.') {
                    this.inputVal = this.inputVal.substr(0,this.inputVal.length-1);
                }
                if(this.operators.indexOf(lastTwoChar) > -1 && lastChar == '.' || this.operators.indexOf(lastChar) > -1 && lastTwoChar == '.'){
                    this.inputVal = this.inputVal.substr(0,this.inputVal.length-1);
                }

                if(this.inputVal){
                    this.inputVal = eval(this.inputVal);
                }
                this.dotAdd = false
            },

            // 判断错误
            errorValue(){
                if(this.inputVal == '不能除以0'){
                    this.inputVal = ''
                    return
                }
            },
        }
    }
</script>

<style scoped>
    .calcuator{
      position: relative;
        padding: 20px 20px 10px;
        border-radius: 4px;
        background: #333744;
        box-shadow: 0 4px #ece9e9, 0 10px 15px rgba(0,0,0,.2);
        box-sizing: border-box;
        z-index: 10;
    }
    .calcBox{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .calcBox span{
        width: 52px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 2px;
        cursor: pointer;
        background: #fff;
        font-weight: bold;
        color: #666;
        margin-bottom: 12px;
        box-shadow: 0 4px rgb(0 0 0 / 20%);
    }
    .calcBox .btn-double {
        width: 115px;
        background: #ffc690;
        box-shadow: 0 4px #ab7c50;
    }
</style>
